{extend name="style/base"/}
{block name="resources"}
<style>
	.tree-line{padding:10px 0;background:#ededed;margin-bottom:2px;}
	.tree-line .layui-form-checkbox{margin-top:0 !important;margin-right:10px;margin-left:10px;vertical-align:middle;}
	.tree-line label{margin-right:30px;display:inline-block;cursor:pointer;}
	.layui-input-block{margin-left: 150px; }
    .next-step{margin-top:100px;}
    .layui-form-item .layui-form-checkbox[lay-skin=primary]{margin-top: 0;}
</style>
<script src="SITEHOME_JS/tree.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var tree_data = {};
    var group_data = {};
</script>
{/block}
{block name="main"}
<div class="layui-form" lay-filter="add_user">
    <div class="layui-tab layui-tab-brief group-type" lay-filter="group_type">
        <ul class="layui-tab-title">
            <li class="layui-this" data-type="1">用户组权限</li>
            <li data-type="2">自定义权限</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label sm">管理组</label>
                    <div class="layui-input-inline nc-len-long">
                        <select name="group_id"id="group_id" lay-verify="group_id"lay-filter="group_id">
                            <option data-group_array = ""value="0">选择管理组</option>
                            {volist name="group_list" id="vo"}
                                <option group_array = "{$vo.array}" addon_array = "{$vo.addon_array}" value="{$vo.group_id}" {if $vo.is_system == 1}disabled{/if}>{$vo.group_name}</option>
                            {/volist}
                        </select>
                        <div class="layui-form-mid layui-word-aux hint">分配用户所属用户权限组后，该用户会自动拥有此用户权限组内的模块操作权限</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">权限</label>
                    <div class="layui-input-inline nc-len-long tree-box" id="tree_box">
                        <div class="layui-collapse">
                            {foreach $tree as $tree_k => $tree_v}
                            <script type="text/javascript">
                                tree_data["{$tree_k}"] = JSON.parse('{$tree_v["tree"]}');
                            </script>

                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title"style="position:relative;">
                                    <div style="position:absolute;right:0;z-index:100;">
                                        <input type="checkbox" class="addon-checkbox"  lay-filter="addon_form" lay-skin="primary"  value="{$tree_k}" title="{$tree_v["info"]["title"]}" />
                                    </div>

                                </h2>
                                <div class="layui-colla-content layui-show group-box group_box_{$tree_k}"></div>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm"></label>
                    <div class="layui-input-inline nc-len-long">
                        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label sm">用户组名称</label>
                    <div class="layui-input-inline nc-len-long">
                        <input type="text" name="group_name" value="" lay-verify="group_name" autocomplete="off" placeholder="请输入用用户组名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">权限</label>
                    <div class="layui-input-inline nc-len-long tree-box" id="tree_box1">
                        <div class="layui-collapse">
                            {foreach $tree as $tree_k => $tree_v}
                            <script type="text/javascript">
                                group_data["{$tree_k}"] = JSON.parse('{$tree_v["tree"]}');
                            </script>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title"style="position:relative;">
                                        <div style="position:absolute;right:0;z-index:100;">
                                            <input type="checkbox" class="addon-checkbox"  lay-filter="addon_form" lay-skin="primary"  value="{$tree_k}" title="{$tree_v["info"]["title"]}" />
                                        </div>

                                    </h2>
                                    <div class="layui-colla-content layui-show group-box group_box_{$tree_k}"></div>
                                </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm"></label>
                    <div class="layui-input-inline nc-len-long">
                        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">

    layui.use(['form', 'element'], function () {
        var group_data_json = JSON.stringify(group_data);
        form = layui.form;
        var element = layui.element;
        form.on('select(group_id)', function(data){
            var selected_arr = $(data.elem).find("option:selected").attr("group_array");//得到select对象
            var addon_arr = $(data.elem).find("option:selected").attr("addon_array");//得到select对象
            var addon_array = addon_arr.split(",");
            var temp_group_data = JSON.parse(group_data_json);
            $("#tree_box .addon-checkbox").each(function(){
                var val = $(this).val();
                if($.inArray(val, addon_array) != -1){
                    $(this).prop('checked', true);
                }else{
                    $(this).prop('checked', false);
                }
            });
            tree_data["{$addon_name}"] = selectedTree(temp_group_data["{$addon_name}"], selected_arr);
            treeRender();

        });

        //监听Tab切换，以改变地址hash值
        element.on('tab(group_type)', function(){
            var temp_group_data = JSON.parse(group_data_json);
            tree_data = temp_group_data;
            if($(this).data("type") == 1){
                tree_id_name = "tree_box";
                $("#group_id").val(0);
                form.render();
            }else{
                tree_id_name = "tree_box1";
                $("input[name='group_name']").val('');

            }
            eachTree();
            form.render();
        });
        form.verify({
            group_name: function (value) {
                if($(".group-type .layui-this").data("type") == 2){
                    if (value == '') {
                        return '自定义权限,用户组名称不可为空!';
                    }
                }
            },
            group_id: function (value) {
                if($(".group-type .layui-this").data("type") == 1){
                    if (value == 0) {
                        return '用户组权限,用户组必须选择!';
                    }
                }
            }
        });
	
		var repeat_flag = false;//防重复标识
        form.on('submit(save)', function (data) {
            var field = data.field;
            field.group_type = $(".group-type .layui-this").data("type");

            var obj = $("#"+tree_id_name+" input:checked.group-checkbox");
            var group_array = [];
            for (var i = 0; i < obj.length; i++) {
                group_array.push(obj.eq(i).val());
            }

            if( field.group_type == 2){
                if(group_array.length  == 0){
                    return '自定义权限,用户组权限不可为空!';
                }
            }
            field.group_array = group_array.toString();

            var addon_obj = $("#"+tree_id_name+" input:checked.addon-checkbox");
            var addon_array = [];
            for (var i = 0; i < addon_obj.length; i++) {
                addon_array.push(addon_obj.eq(i).val());
            }
            field.addon_array = addon_array.toString();

            //应用公共装修页权限
            var diyview_page_array = [];
            var addon_diyview_obj = $("#"+tree_id_name+" input[value='ADDON_DIYVIEW']:checked");
            for (var i = 0; i < addon_diyview_obj.length; i++) {
                diyview_page_array.push(addon_diyview_obj.eq(i).data("tag"));
            }
            field.diyview_page_array = diyview_page_array.toString();
            //应用公共装修页权限
            var auth_page_array = [];
            var addon_auth_obj = $("#"+tree_id_name+" input[value='ADDON_AUTH']:checked");
            for (var i = 0; i < addon_auth_obj.length; i++) {
                auth_page_array.push(addon_auth_obj.eq(i).data("tag"));
            }
            
            field.auth_page_array = auth_page_array.toString();
			field.addon_name = "{$addon_name}";
			
			if (repeat_flag) return;
			repeat_flag = true;

            $.ajax({
                type: "post",
                url: nc.url("sitehome/manager/moduleGroup"),
                data: data.field,
                dataType: "JSON",
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.message, function () {
                            location.reload();
                        });
                    } else {
						repeat_flag = false;
                        layer.msg(res.message);
                    }
                }
            });
            //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            return false;
        });
    })
</script>

{/block}